<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
        <!-- 1.form代表整个表单  action属性表示收集好数据后提交的地址 #占位符表示提交到当前页 -->
        <form action="#">
            <!-- 2.表单里可以写各种表单控件，如：输入框、单选、多选等
             type的值： text普通文本输入框  submit提交按钮 password密码输入框 radio单选框 checkbox复选框
             date日期  color颜色  range范围  file文件
             name属性必须有值才可以提交，
             value属性本来就存在，用来保存控件的值，也可以通过value属性设置输入框的默认值
             readonly只读属性，可以看到值，但无法修改，可以提交数据
             disabled禁用属性，可以看到值，但无法操作，不可以提交数据-->
            姓名：<input type="text" name="uname" placeholder="请输入姓名"> <br>
            昵称：<input type="text" name="nickname1" value="rose"> <br>
            昵称：<input type="text" name="nickname2" value="rose" readonly> <br>
            昵称：<input type="text" name="nickname3" value="rose" disabled> <br>
            密码：<input type="password" maxlength="6" value="123456" name="pwd"> <br>
            <!-- 单/多选必须设置相同的name分到同一组！
            且需要给每个选项设置value值，否则提交的是on
            checked属性设置选项默认被选中-->
            性别：
            <input type="radio" name="gender" value="1">男
            <input type="radio" name="gender" value="0" checked>女
            <br>
            爱好：
            <input type="checkbox" name="like" value="cy">抽烟
            <input type="checkbox" name="like" value="hj">喝酒
            <input type="checkbox" name="like" value="tt" checked>烫头
            <input type="checkbox" name="like" value="java" checked>学java
            <br>
            生日：<input type="date" name="birthday"> <br>
            幸运色：<input type="color" name="lColor"> <br>
            缩放：<input type="range" name="scale"> <br>
            文件：<input type="file" name="file"><br>
            <hr>
            喜欢的城市：
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh" selected>上海</option>
                <option value="gz">广州</option>
                <option value="sz">深圳</option>
            </select>
            <br>
            <input type="checkbox" id="ok">
            <label for="ok">我同意以上协议</label>
            <br>
            <!--获取焦点-->
            <label for="uu">关联文字</label>
            <input type="text" id="uu">
            <hr>
            <input type="submit" value="点我提交">
            <input type="reset" value="点我重置">
            <input type="button" value="普通按钮">
            <button>普通按钮</button>
        </form>
    </body>
</html>